import {DeleteOutlined, EditOutlined, PlusOutlined, SettingOutlined} from '@ant-design/icons';
import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {PageContainer, ProTable} from '@ant-design/pro-components';
import '@umijs/max';
import {Button, Form, Select} from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import {category, list, remove} from './service';
import Add from './components/Add';

const List: React.FC = () => {
  const [createModalOpen, handleModalOpen] = useState<boolean>(false);
  const [selectedRowsState, setSelectedRows] = useState<Record<string, any>[]>([]);
  const [currentRow, setCurrentRow] = useState<Record<string, any>>();
  const [categories,setCategories] = useState<Record<string, any>[]>([]);

  const actionRef = useRef<ActionType>();


  useEffect(() => {
    category().then(result=>{
      setCategories(result.data || []);
    })
  }, []);

  const columns: ProColumns[] = [
    {
      title: '分类',
      dataIndex: 'textAppCategoryName',
      width: 80,
      renderFormItem:()=>(
        <Form.Item
          name="textAppCategoryId"
          rules={[{ required: true, message: '必填' }]}
        >
          <Select allowClear style={{width:'100%'}}>
            {
              categories.map(item=><Select.Option value={item.id}>{item.name}</Select.Option>)
            }
          </Select>
        </Form.Item>
      )
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: 80,
    },
    {
      title: '描述',
      dataIndex: 'memo',
      width: 200,
    },
    {
      title: '类型',
      dataIndex: 'type',
      hideInSearch: true,
      width: 50,
      valueEnum: {
        0: {
          text: '创作',
        },
        1: {
          text: '办公',
        },
      },
    },
    {
      title: '图标',
      dataIndex: 'icon',
      valueType: 'avatar',
      hideInSearch: true,
      width: 50,
    },
    {
      title: '提示词',
      dataIndex: 'prompt',
      hideInSearch: true,
      renderText: (text) => <div style={{ whiteSpace: 'break-spaces' }}>{text}</div>,
    },
    {
      title: '自定义提示词',
      dataIndex: 'userPrompt',
      hideInSearch: true,
      renderText: (text) => <div style={{ whiteSpace: 'break-spaces' }}>{text}</div>,
    },
    {
      title: '创建时间',
      dataIndex: 'createdDate',
      valueType: 'dateTime',
      width: 150,
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'opt',
      valueType: 'option',
      width: 160,
      fixed: 'right',
      renderText: (text, record) => [
        <Button
          type="text"
          icon={<EditOutlined style={{ color: '#1890ff' }} />}
          onClick={() => {
            handleModalOpen(true);
            setCurrentRow(record);
          }}
        />,
        <Button
          type="text"
          icon={<DeleteOutlined style={{ color: '#ff5500' }} />}
          onClick={() => {
            remove({
              ids: record.id,
            }).then((result) => {
              console.log(result);
              actionRef.current?.reload();
            });
          }}
        />,
        <Button type="text" icon={<SettingOutlined style={{ color: '#1890ff' }} />} />,
      ],
    },
  ];
  return (
    <PageContainer title={false}>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        size="small"
        bordered
        options={false}
        tableAlertRender={false}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleModalOpen(true);
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              remove({
                ids: selectedRowsState.map((item) => item.id).join(','),
              }).then((result) => {
                console.log(result);
                actionRef.current?.reload();
              });
            }}
          >
            <PlusOutlined /> 删除
          </Button>,
        ]}
        request={list}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      />
      {createModalOpen ? (
        <Add
          values={currentRow}
          open={createModalOpen}
          onClose={() => {
            handleModalOpen(false);
            setCurrentRow({});
            actionRef.current?.reload();
          }}
        />
      ) : null}
    </PageContainer>
  );
};
export default List;
